<template>
	<view class="container_wrap">
		<wd-search v-model="searchText" @search="search" hide-cancel />

		<wd-swiper :list="swiperList" autoplay :current="1" :indicator="{ showControls: true }"
			:loop="true"></wd-swiper>
		<wd-grid :column="4">
			<block v-for="item in wdGridimg" :key="item.url">
				<wd-grid-item use-icon-slot use-text-slot icon-size="80rpx">
					<template #icon>
						<image class="slot-img" :src="item.url" />
					</template>
					<template #text>
						<view class="slot-text">{{item.name}}</view>
					</template>
				</wd-grid-item>
			</block>
		</wd-grid>

		<view class="adver_wrap">
			<image src="https://gw.alicdn.com/imgextra/i1/O1CN018qiDoD23TImB590iJ_!!6000000007256-1-tps-1125-327.gif"
				mode="widthFix"></image>
		</view>



		<uv-waterfall ref="waterfall" v-model="list" :add-time="10" :left-gap="leftGap" :right-gap="rightGap"
			:column-gap="columnGap" @changeList="changeList">
			<!-- 第一列数据 -->
			<template v-slot:list1>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item">
						<view class="waterfall-item__image" :style="[imageStyle(item)]">
							<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
						</view>
						<view class="waterfall-item__ft">
							<view class="waterfall-item__ft__title">
								<text class="value">{{item.title}}</text>
							</view>
							<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item.desc}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 第二列数据 -->
			<template v-slot:list2>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
						<view class="waterfall-item__image" :style="[imageStyle(item)]">
							<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
						</view>
						<view class="waterfall-item__ft">
							<view class="waterfall-item__ft__title">
								<text class="value">{{item.title}}</text>
							</view>
							<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item.desc}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</uv-waterfall>

	</view>
</template>


<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue';
	import mocJosn from '@/api/mock/product.json'

	const swiperList = ref([
		'https://img.alicdn.com/imgextra/i2/O1CN01PzP9U41pn5GMddVzV_!!6000000005404-2-tps-750-291.png_Q90.jpg',
		'https://img.alicdn.com/imgextra/i1/O1CN01kAiRl51Q2UZjq4ESU_!!6000000001918-0-tps-750-291.jpg_Q90.jpg',
		'https://img.alicdn.com/imgextra/i3/O1CN01tWEnZb1zvv3pE3PiS_!!6000000006777-2-tps-750-291.png_Q90.jpg',
	]);
	const searchText = ref<string>('');

	function search() {
		console.log('搜索')
	}

	const wdGridimg = ref(
		[
			{ name: "中外名酒", url: "https://gw.alicdn.com/imgextra/i3/O1CN01GiRkhK26V59zr3Omv_!!6000000007666-2-tps-153-153.png_200x200Q50s50.jpg_.webp" },
			{ name: "零食速食", url: "https://gw.alicdn.com/imgextra/i4/O1CN01bUBrp41u7TM0PSFmA_!!6000000005990-2-tps-153-153.png_200x200Q50s50.jpg_.webp" },
			{ name: "电器数码", url: "https://gw.alicdn.com/imgextra/i3/O1CN017Sm4L61Rvjy35aN4Q_!!6000000002174-2-tps-153-153.png_200x200Q50s50.jpg_.webp" },
			{ name: "个人洗护", url: "https://gw.alicdn.com/imgextra/i2/O1CN01nsRQVU22gkn6GZDju_!!6000000007150-2-tps-153-153.png_200x200Q50s50.jpg_.webp" },
			{ name: "母婴育儿", url: "https://gw.alicdn.com/imgextra/i3/O1CN01LxMZna1Td53vp7bZl_!!6000000002404-2-tps-153-153.png_200x200Q50s50.jpg_.webp" },
			{ name: "年货礼盒", url: "https://gw.alicdn.com/imgextra/i1/O1CN01z9Npbj24kzgSOsE8q_!!6000000007430-2-tps-153-153.png_200x200Q50s50.jpg_.webp" },
			{ name: "果蔬生鲜", url: "https://gw.alicdn.com/imgextra/i3/O1CN01XIO6Kw1FhI56lF9bU_!!6000000000518-2-tps-153-153.png_200x200Q50s50.jpg_.webp" },
			{ name: "医疗健康", url: "https://gw.alicdn.com/imgextra/i3/O1CN016t6kkb1xqlCSjBVqA_!!6000000006495-2-tps-153-153.png_200x200Q50s50.jpg_.webp" },
		]
	)


	// 瀑布流组件相关

	const list = ref([]);// 瀑布流全部数据
	const list1 = ref([]);// 瀑布流第一列数据
	const list2 = ref([]);// 瀑布流第二列数据
	const leftGap = ref(10);
	const rightGap = ref(10);
	const columnGap = ref(10);

	let imageStyle = computed(() => (item => {
		const v = uni.upx2px(750) - leftGap.value - rightGap.value - columnGap.value;
		const w = v / 2;
		const rate = w / item.w;
		const h = rate * item.h;
		return { width: w + 'px', height: h + 'px' }
	}));

	// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
	const changeList = (e) => {
		e.name == 'list1' ? list1.value.push(e.value) : list2.value.push(e.value);
	};

	// 模拟的后端数据
	async function getData() {
		return new Promise(resolve => {
			type itemType = {
				image : string;
				desc : string;
				title : string;
			}
			let list = mocJosn.data.map(item => {
				const obj : itemType = {
					image: "",
					desc: "",
					title: "",
				};

				obj.image = item.commodityImgUrl;
				obj.desc = '商品名称desc商品名称商品名称商品名称商品名称商品名称';
				obj.title = '商品名称'
				return obj
			})
			setTimeout(() => {
				resolve({ data: list });
			}, 200);
		});
	};

	onMounted(async () => {
		let { data } = await getData();
		data = await Promise.all(data.map(async (item) => {
			try {
				const dimension = await getImageDimensions(item.image);
				item.w = dimension.width;
				item.h = dimension.height;
			} catch {
				item.w = 100;
				item.h = 110;
				item.image = "https://via.placeholder.com/100x110.png/3c9cff/fff";
			}

			return item;
		}));
		list.value = data;
	});

	function getImageDimensions(imageSrc) {
		return new Promise((resolve, reject) => {
			const imgEl = document.createElement('img');
			imgEl.onload = () => {
				resolve({
					width: imgEl.naturalWidth,
					height: imgEl.naturalHeight
				});
			}
			imgEl.onerror = reject;
			imgEl.src = imageSrc;
		});
	}
</script>

<style lang="scss" scoped>
	.slot-img {
		height: 80rpx;
		width: 80rpx;
		border-radius: 4px;
	}

	.slot-text {
		color: #000;
		margin-top: 8rpx;
	}

	.adver_wrap {
		text-align: center;
	}
</style>